<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
</head>
<body>
    <div class="card">
        <div class="p1">
            <div class="text">
                <div id="t1">Welcome Back</div>
                <div id="t2">Welcome Back,enter your info to login</div>
            </div>
            <form action="/login" method="post" id="myform">
                <div class="input">
                    <label for="username">UserName</label>
                    <input type="text" name="username" id="name" placeholder="enter your username">
                    <span class="spin"></span>
                </div>
                <div class="input">
                    <label for="password">PassWord</label>
                    <input type="password" name="password" id="pass" placeholder="enter your password">
                    <span class="spin"></span>
                </div>
                <div class="button login">
                    <button type="submit">
                        <span>Submit</span>
                        <i class="fa fa-check"></i>
                    </button>
                </div>
            </form>
        </div>
        <div class="p2">
            <svg t="1655691493804" class="icon1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10075" width="200" height="200"><path d="M0 512C0 229.230208 229.805588 0 512 0 794.769792 0 1024 229.805588 1024 512 1024 794.769792 794.194412 1024 512 1024 229.230208 1024 0 794.194412 0 512Z" p-id="10076" fill="#a686ba"></path></svg>
            <!-- <svg t="1655691681885" class="icon2" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10823" width="200" height="200"><path d="M512 288H64c0 245.8 202.2 448 448 448s448-202.2 448-448H512z" p-id="10824" fill="#a686ba"></path></svg> -->
<!--            <img src="halfcircle.png" alt="半圆">-->
            <div class="lines">
                <div class="line"></div>
                <div class="line" style="height: 10px;"></div>
                <div class="line" style="height: 8px;"></div>
                <div class="line" style="height: 6px;"></div>
            </div>
        </div>
    </div>

    <style>
        body{
            width: 100vw;
            height: 100vh;
            background-color: #D2D0DD;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #myform{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .input{
            margin-bottom: 20px;
            width: 200px;
            color: #9B9FAA;
            font-size: small;
        }
        .input input{
            background:none;    
            outline:none;   
            border: 1px solid #9B9FAA;
            width: 200px;
            height: 30px;
            border-radius: 3px;
            
        }
        .input label{
            text-align: start;
            font-size: small;
        }

        .card{
            width: 70vw;
            height: 75vh;
            background-color: white;
            border-radius: 12px;
            box-shadow: 10px 5px 5px rgb(144, 135, 199);

            display: flex;
            animation-name: toshadows;
            animation-duration: 3s;
            animation-iteration-count: infinite;
        }
        @keyframes toshadows {
            0% {box-shadow: 8px 5px 5px rgb(144, 135, 199);}
            50% {box-shadow: 5px 5px 5px rgb(144, 135, 199);}
            0% {box-shadow: 8px 5px 5px rgb(144, 135, 199);}
        }
        .p1{
            width: 50%;
            order: 1;
            background-color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;           
            border-top-left-radius:12px;   
            border-bottom-left-radius:12px;   
        }
        .button button{
            width: 200px;
            height: 30px;
            background-color: #7F56DA;
            border-radius: 12px;
            border: 0px solid #7F56DA;
            color: white;
    
        }

        .p2{
            width: 50%;
            order: 1;
            background-color: #F3F4F8;
            border-top-right-radius:12px;   
            border-bottom-right-radius:12px;
            position: relative;   
        }
        .icon1{
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -100px;
            opacity: 0.5;
            animation-name: sizechange;
            animation-duration: 3s;
            animation-iteration-count: infinite;
        }
        @keyframes sizechange {
            0%   {margin-top: -100px;}
            30%  {margin-top: -150px;}
            100% {margin-top: -100px;}
        }

        svg path{
            animation-name: example;
            animation-duration: 3s;
            animation-iteration-count: infinite;
        }
        @keyframes example {
            0%   {fill: #a686ba;}
            50%  {fill: #5F3DB5;}
            100% {fill: #a686ba;}
            }
        .icon2{
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -100px;
        }
        .p2 img{
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -60px;
            margin-left: -100px;
            filter: blur(20px);
        }
        .lines{
            background-color: transparent;
            position: relative;
            top: 50%;
        }
        .line{
            background-color: #F3F4F8;
            height: 10px;
            margin-bottom: 20px;
            animation-name: toblur;
            animation-duration: 3s;
            animation-iteration-count: infinite;
        }
        @keyframes toblur {
            0%   {filter: blur(0px);}
            30%  {filter: blur(3px);}
            100% {filter: blur(0px);}
            }

        #t1{
            font-size: xx-large;
            height: 50px;
            position: relative;
            bottom: 50px;
            right: 30px;
            animation-name: movetext;
            animation-duration: 3s;
            animation-iteration-count: 2;
        }
        @keyframes movetext {
            0%   {padding-left: 0px;}
            50%  {padding-left: 30px;}
            75%  {padding-left: 80px;}
            100% {padding-left: 0px;}
            }
        #t2{
            font-size: x-small;
            height: 20px;
            position: relative;
            bottom: 50px;
            right: 30px;
        }
    </style>
</body>
</html>